<template>
    <div class="IEbox">
        <HandVue :left="true" :iconbool="false" title="收支明细" @back="fn"></HandVue>
        <ul>
            <li v-for="item, index in arr" :key="item" @click="tab(index, item)" :class="{ active: num === index }">{{
                    item
            }}
            </li>
        </ul>

        <div class="son">
            <MyIESon v-for="item, index in newListArr" :key="item.id" :title="item.title" :num="item.num"
                :time="item.time" :type="item.type" :price="item.price">
            </MyIESon>

        </div>
    </div>

</template>

<script setup>
import HandVue from '../../components/Hand.vue';
import { useRouter } from 'vue-router'
import { ref } from 'vue';
import MyIESon from './MyIESon.vue'
import dayjs from "dayjs";



const router = useRouter()

const sizer = ref('全部')
const newListArr = ref([])



const num = ref(0)

function tab(index, val) {
    num.value = index
    sizer.value = val

    if (sizer.value === '全部') {
        newListArr.value = listArr.value

    }
    if (sizer.value === '收入') {

        newListArr.value = listArr.value.filter((item) => {
            return item.type === '自助回收'
        })


    }
    if (sizer.value === '支出') {
        newListArr.value = listArr.value.filter((item) => {
            return (item.type === '商城兑换' || item.type === '手机提现')

        })


    }

}

function fn() {
    router.back()
}

const arr = ref([
    '全部', '收入', '支出'
])

const time = dayjs().format('YYYY-MM-DD HH:mm:ss')

const listArr = ref([
    {
        title: '人民广场自助回收机',
        type: '自助回收',
        time,
        price: 255,
        num: 0,
        id: 1
    },
    {
        title: '创意卫浴五件套 欧式高档卫生间洗漱口杯',
        type: '商城兑换',
        time,
        price: 333,
        num: 1,
        id: 2
    },
    {
        title: 'OMINI人民广场自助回收机  ',
        type: '手机提现',
        time,
        price: 444,
        num: 2,
        id: 3
    },
    {
        title: '创意卫浴五件套 欧式高档卫生间洗漱口杯1',
        type: '商城兑换',
        time,
        price: 333,
        num: 1,
        id: 4
    },
    {
        title: '人民广场自助回收机',
        type: '自助回收',
        time,
        price: 255,
        num: 0,
        id: 5
    },
    {
        title: '创意卫浴五件套 欧式高档卫生间洗漱口杯',
        type: '商城兑换',
        time,
        price: 333,
        num: 1,
        id: 6
    },
    {
        title: 'OMINI人民广场自助回收机  ',
        type: '手机提现',
        time,
        price: 444,
        num: 2
        , id: 7
    },
    {
        title: '创意卫浴五件套 欧式高档卫生间洗漱口杯',
        type: '商城兑换',
        time,
        price: 333,
        num: 1,
        id: 8
    }, {
        title: 'OMINI人民广场自助回收机  ',
        type: '手机提现',
        time,
        price: 444,
        num: 2,
        id: 9
    },
    {
        title: '创意卫浴五件套 欧式高档卫生间洗漱口杯',
        type: '商城兑换',
        time,
        price: 333,
        num: 1,
        id: 10
    },
])

if (sizer.value === '全部') {
    newListArr.value = listArr.value
}




</script>

<style lang="less" scoped>
.IEbox {
    display: flex;
    flex-direction: column;
    height: 100vh;

    .son {
        width: 100%;
        flex: 1;
        background: #ecfdfa;
        overflow-y: scroll;
        padding-bottom: 20px;
    }



    ul {
        display: flex;
        height: 16vw;
        background: #3ed2e2;

        // margin-top: 60px;
        .active {
            font-weight: 700;
            font-size: 4.5vw;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                border-radius: 0.5vw;
                height: 4vw;
                width: 1vw;
                background: red;
                left: 20%;
                top: calc(50% - 2.5vw);
            }
        }

        li {
            width: 25%;
            text-align: center;
            line-height: 16vw;
            font-size: 3.5vw;
            color: white;
        }
    }


}
</style>